<%@ taglib prefix="spring" uri="http://www.springframework.org/tags" %>
<%--
  Created by IntelliJ IDEA.
  User: qupen
  Date: 2016/11/9
  Time: 13:28
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<jsp:include page="../../include/head.jsp">
    <jsp:param name="title" value="机床设置"/>
</jsp:include>
<link rel="stylesheet" href="/css/select2.css">
<jsp:include page="../../include/tenant_header.jsp"/>

<jsp:include page="../../include/tenant_sidebar.jsp"/>
<div class="content-wrapper content-wrapper-bg">
    <section class="content-header">
        <h4 class="page-title" style="display: inline-block"><spring:message code="label.tenant.device.list"/></h4>
        <a class="btn btn-add pull-right" id="showOrHide" href="javascript:;" style="margin-left:44px;">
            <spring:message code="label.user.show.search"/>
        </a>
    </section>
    <section class="content">
        <div class="hidden" style="margin-bottom: 15px;" id="showOrHideSearch">
            <div class="row">
                <div class="col-md-3" style="margin-top: 5px;padding-left: 0;padding-right: 0;">
                    <label style="width: 80px;"><spring:message code="label.device.id"/>:</label>
                    <select id="mtid" class="form-control sie-input-border sie-input-uwh" style="width: 150px;">

                    </select>
                </div>
                <div class="col-md-3" style="margin-top: 5px;padding-left: 0;padding-right: 0;">
                    <label style="width: 96px;"><spring:message code="label.device.name"/>:</label>
                    <select id="mtName" class="form-control sie-input-border sie-input-uwh select2-xyys"
                            style="width: 150px;">

                    </select>
                </div>
                <div class="col-md-3" style="margin-top: 5px;padding-left: 0;padding-right: 0;">
                    <label style="width: 96px;"><spring:message code="label.device.type"/>:</label>
                    <select id="mtType" class="form-control sie-input-border sie-input-uwh select2-xyys"
                            style="width: 150px;">

                    </select>
                </div>

                <div class="col-md-3" style="margin-top: 5px;padding-left: 0;padding-right: 0;">
                    <label style="width: 96px;"><spring:message code="label.device.model"/>:</label>
                    <select id="mtModel" class="form-control sie-input-border sie-input-uwh select2-xyys"
                            style="width: 150px;padding: 1px 12px;">

                    </select>
                </div>
            </div>
            <div class="row">
                <div class="col-md-3" style="margin-top: 5px;padding-left: 0;padding-right: 0;">
                    <label style="width: 80px;"><spring:message code="label.group"/>:</label>
                    <select id="mtGroup" class="form-control sie-input-border sie-input-uwh select2-xyys"
                            style="width: 150px;">

                    </select>
                </div>
                <div class="col-md-3" style="margin-top: 5px;padding-left: 0;padding-right: 0;">
                    <label style="width: 96px;"><spring:message code="label.device.line"/>:</label>
                    <select id="mtLine" class="form-control sie-input-border sie-input-uwh select2-xyys"
                            style="width: 150px;">

                    </select>
                </div>
                <div class="col-md-3" style="margin-top: 5px;padding-left: 0;padding-right: 0;">
                    <label style="width: 96px;"><spring:message code="label.device.manufactory"/>:</label>
                    <select id="mtMade" class="form-control sie-input-border sie-input-uwh select2-xyys"
                            style="width: 150px;">

                    </select>
                </div>
                <div class="col-md-3" style="margin-top: 5px;padding-left: 0;padding-right: 0;">
                    <label style="width: 96px;">&nbsp;</label>
                    <a id="search" class="solid-button-orange" href="javascript:;" style="width: 150px;"><spring:message code="label.admin.search"/></a>
                </div>
            </div>
        </div>
        <div class="box box-primary table-header-line">
            <div class="box-body" style="padding: 0">
                <table class="table" id="device_list">
                    <thead>
                    <tr>
                        <th><spring:message code="label.device.id"/></th>
                        <th><spring:message code="label.device.name"/></th>
                        <th><spring:message code="label.device.type"/></th>
                        <th><spring:message code="label.device.model"/></th>
                        <th><spring:message code="label.group"/></th>
                        <th><spring:message code="label.device.line"/></th>
                        <th><spring:message code="label.device.manufactory"/></th>
                        <th><spring:message code="label.tenant.create.description"/></th>
                    </tr>
                    </thead>
                    <tbody>
                    </tbody>
                </table>
            </div>
        </div>
        <%--</div>--%>
    </section>
</div>
<jsp:include page="../../include/foot.jsp"/>
<script src="/js/select2.full.min.js"></script>
<script>
    // select mtid
    $(document).ready(function () {
        $('#mtid').select2({
                    placeholder: '<spring:message code="label.tenant.please.enter.MTId"/>',
                    minimumInputLength: 1,
                    paging: false,
                    searching: false,
                    multiple: false,
                    allowClear: true,
                    ajax: {
                        url: "/partner/{tenant}/api/v1/device/like".replace("{tenant}", getKeyByUrl()),
                        dataType: "json",
                        type: 'GET',
                        data: function (params) {
                            return {str: params.term};
                        },
                        processResults: function (data) {
                            var results = [];
                            $.each(data.data, function (i, v) {
                                var o = {};
                                o.id = v.device_id;
                                o.text = v.device_unique_id/* + "(" + v.device_name + ")"*/;
                                results.push(o);
                            });
                            return {
                                results: results
                            };
                        },
                        cache: true
                    },
                    escapeMarkup: function (m) {
                        return m;
                    }
                })
                .on('hide.bs.modal', function () {
                    $('#mtid').empty();
                })
                .on('select2:select', function (evt) {
                    $('.select2-xyys').attr("disabled", true);
                })
                .on('select2:unselect', function (evt) {
                    $('.select2-xyys').attr("disabled", false);
                });
    });
    // select name
    $(document).ready(function () {
        $('#mtName').select2({
                    placeholder: '<spring:message code="label.tenant.please.enter.device.name"/>',
                    minimumInputLength: 1,
                    paging: false,
                    searching: false,
                    multiple: false,
                    allowClear: true,
                    ajax: {
                        url: "/partner/{tenant}/api/v1/device/likeName".replace("{tenant}", getKeyByUrl()),
                        dataType: "json",
                        type: 'GET',
                        data: function (params) {
                            return {str: params.term};
                        },
                        processResults: function (data) {
                            var results = [];
                            $.each(data.data, function (i, v) {
                                var o = {};
                                o.id = v.device_name;
                                o.text = v.device_name/* + "(" + v.device_name + ")"*/;
                                results.push(o);
                            });
                            return {
                                results: results
                            };
                        },
                        cache: true
                    },
                    escapeMarkup: function (m) {
                        return m;
                    }
                })
                .on('hide.bs.modal', function () {
                    $('#mtName').empty();
                });
    });
    //select type
    $(document).ready(function () {
        $('#mtType').select2({
                    placeholder: '<spring:message code="label.tenant.please.enter.device.type"/>',
                    minimumInputLength: 1,
                    paging: false,
                    searching: false,
                    multiple: false,
                    allowClear: true,
                    ajax: {
                        url: "/partner/{tenant}/api/v1/device/likeType".replace("{tenant}", getKeyByUrl()),
                        dataType: "json",
                        type: 'GET',
                        data: function (params) {
                            return {str: params.term};
                        },
                        processResults: function (data) {
                            var results = [];
                            $.each(data.data, function (i, v) {
                                var o = {};
                                o.id = v.device_type;
                                o.text = v.device_type/* + "(" + v.device_name + ")"*/;
                                results.push(o);
                            });
                            return {
                                results: results
                            };
                        },
                        cache: true
                    },
                    escapeMarkup: function (m) {
                        return m;
                    }
                })
                .on('hide.bs.modal', function () {
                    $('#mtType').empty();
                });
    });
    //select model
    $(document).ready(function () {
        $('#mtModel').select2({
                    placeholder: '<spring:message code="label.tenant.please.enter.device.model"/>',
                    minimumInputLength: 1,
                    paging: false,
                    searching: false,
                    multiple: false,
                    allowClear: true,
                    ajax: {
                        url: "/partner/{tenant}/api/v1/device/likeModel".replace("{tenant}", getKeyByUrl()),
                        dataType: "json",
                        type: 'GET',
                        data: function (params) {
                            return {str: params.term};
                        },
                        processResults: function (data) {
                            var results = [];
                            $.each(data.data, function (i, v) {
                                var o = {};
                                o.id = v.device_model;
                                o.text = v.device_model/* + "(" + v.device_name + ")"*/;
                                results.push(o);
                            });
                            return {
                                results: results
                            };
                        },
                        cache: true
                    },
                    escapeMarkup: function (m) {
                        return m;
                    }
                })
                .on('hide.bs.modal', function () {
                    $('#mtModel').empty();
                });
    });
    //select group
    $(document).ready(function () {
        $('#mtGroup').select2({
                    placeholder: '<spring:message code="label.tenant.please.enter.group"/>',
                    minimumInputLength: 1,
                    paging: false,
                    searching: false,
                    multiple: false,
                    allowClear: true,
                    ajax: {
                        url: "/partner/{tenant}/api/v1/device/likeGroup".replace("{tenant}", getKeyByUrl()),
                        dataType: "json",
                        type: 'GET',
                        data: function (params) {
                            return {str: params.term};
                        },
                        processResults: function (data) {
                            var results = [];
                            $.each(data.data, function (i, v) {
                                var o = {};
                                o.id = v.group;
                                o.text = v.group/* + "(" + v.device_name + ")"*/;
                                results.push(o);
                            });
                            return {
                                results: results
                            };
                        },
                        cache: true
                    },
                    escapeMarkup: function (m) {
                        return m;
                    }
                })
                .on('hide.bs.modal', function () {
                    $('#mtGroup').empty();
                });
    });
    //select line
    $(document).ready(function () {
        $('#mtLine').select2({
                    placeholder: '<spring:message code="label.tenant.please.enter.line"/>',
                    minimumInputLength: 1,
                    paging: false,
                    searching: false,
                    multiple: false,
                    allowClear: true,
                    ajax: {
                        url: "/partner/{tenant}/api/v1/device/likeLine".replace("{tenant}", getKeyByUrl()),
                        dataType: "json",
                        type: 'GET',
                        data: function (params) {
                            return {str: params.term};
                        },
                        processResults: function (data) {
                            var results = [];
                            $.each(data.data, function (i, v) {
                                var o = {};
                                o.id = v.line;
                                o.text = v.line/* + "(" + v.device_name + ")"*/;
                                results.push(o);
                            });
                            return {
                                results: results
                            };
                        },
                        cache: true
                    },
                    escapeMarkup: function (m) {
                        return m;
                    }
                })
                .on('hide.bs.modal', function () {
                    $('#mtLine').empty();
                });
    });
    //select made
    $(document).ready(function () {
        $('#mtMade').select2({
                    placeholder: '<spring:message code="label.tenant.please.enter.manufactory"/>',
                    minimumInputLength: 1,
                    paging: false,
                    searching: false,
                    multiple: false,
                    allowClear: true,
                    ajax: {
                        url: "/partner/{tenant}/api/v1/device/likeMade".replace("{tenant}", getKeyByUrl()),
                        dataType: "json",
                        type: 'GET',
                        data: function (params) {
                            return {str: params.term};
                        },
                        processResults: function (data) {
                            var results = [];
                            $.each(data.data, function (i, v) {
                                var o = {};
                                o.id = v.device_manufactory;
                                o.text = v.device_manufactory/* + "(" + v.device_name + ")"*/;
                                results.push(o);
                            });
                            return {
                                results: results
                            };
                        },
                        cache: true
                    },
                    escapeMarkup: function (m) {
                        return m;
                    }
                })
                .on('hide.bs.modal', function () {
                    $('#mtMade').empty();
                });
    });
    $(document).ready(function () {
        $("#showOrHide").click(function(){
            if ($("#showOrHideSearch").hasClass("hidden")){
                $("#showOrHideSearch").removeClass('hidden');
                $("#showOrHide").text('<spring:message code="label.user.hide.search"/>');
            }else{
                $("#showOrHideSearch").addClass('hidden');
                $("#showOrHide").text('<spring:message code="label.user.show.search"/>');
            }

        });
       loadDataTables();
        $("#search").click(function(){
            loadDataTables();
        });
    });

    function loadDataTables() {
        var data = {}, mtid, type, model, group, line, made, name;
        mtid = $("#mtid option:selected").text() == undefined ? '' : $("#mtid option:selected").text();
        if (!mtid == null && !mtid == undefined && mtid !== '') {
            name = '';
            type = '';
            model = '';
            group = '';
            line = '';
            made = '';
        } else {
            name = $("#mtName option:selected").text() == undefined ? '' : $("#mtName option:selected").text();
            type = $("#mtType option:selected").text() == undefined ? '' : $("#mtType option:selected").text();
            model = $("#mtModel option:selected").text() == undefined ? '' : $("#mtModel option:selected").text();
            group = $("#mtGroup option:selected").text() == undefined ? '' : $("#mtGroup option:selected").text();
            line = $("#mtLine option:selected").text() == undefined ? '' : $("#mtLine option:selected").text();
            made = $("#mtMade option:selected").text() == undefined ? '' : $("#mtMade option:selected").text();
        }
        data["name"] = name;
        data["mtid"] = mtid;
        data["type"] = type;
        data["model"] = model;
        data["group"] = group;
        data["line"] = line;
        data["made"] = made;
        $('#device_list').DataTable({
            "dom": '<"datatable-header"<"dataTables_filter">l><"datatable-scroll"t><"datatable-footer dataTable-footer-padding"<"pull-left"i><"pull-right"p>>',
            paging: true,
            lengthChange: false,
            ordering: true,
            autoWidth: false,
            info: true,
            "searching": false,
            "destroy": true,
            serverSide: true,
            fixedHeader: true,
            aLengthMenu: [15],
            ajax: {
//                url: '/partner/{tenant}/api/v1/device/searchInfo'.replace("{tenant}", getKeyByUrl()),
                url: '/partner/{tenant}/api/v1/device/searchInfoByDateTable'.replace("{tenant}", getKeyByUrl()),
                data: data,
                dataSrc: 'data'
            },
            columns: [
                {
                    data: 'device_unique_id',
                    "render": function (data, type, full, meta) {
                        return '<a href="javascript:;" onclick="changeUrl(\'' + full.device_id + '\')">' + data + '</a>';
                    }
                },
                {
                    data: 'device_name'
                },
                {
                    data: 'device_type'
                },
                {
                    data: 'device_model'
                },
                {
                    data: 'group'
                },
                {
                    data: 'line'
                },
                {
                    data: 'device_manufactory'
                },
                {
                    data: 'description'
                }
            ],
            "language": {url: '/lang/datatable.chs.json'}
        });
    }
    function changeUrl(deviceId) {
        window.location.href = ("/partner/{tenant}/user/dashboard?deviceId=" + deviceId).replace("{tenant}", getKeyByUrl());
    }
</script>